<template>
  <div class="h-full bg-gray-50 p-4 overflow-y-auto">
    <h2 class="text-lg font-semibold mb-4">属性面板</h2>
    
    <div v-if="!store.selectedField" class="text-center text-gray-400 py-8">
      <el-icon size="32" class="mb-2"><InfoFilled /></el-icon>
      <p>请选择组件以编辑属性</p>
    </div>

    <div v-else>
      <el-form :model="store.selectedField" label-width="80px" size="small">
        <!-- 基础属性 -->
        <el-divider>基础属性</el-divider>
        
        <el-form-item label="字段类型">
          <el-input :model-value="store.selectedField.type" disabled />
        </el-form-item>

        <el-form-item label="标签文本">
          <el-input v-model="store.selectedField.label" placeholder="请输入标签文本" />
        </el-form-item>

        <el-form-item label="占位符">
          <el-input v-model="store.selectedField.placeholder" placeholder="请输入占位符" />
        </el-form-item>

        <el-form-item label="是否必填">
          <el-switch v-model="store.selectedField.required" />
        </el-form-item>

        <el-form-item label="默认值">
          <el-input v-model="store.selectedField.defaultValue" placeholder="请输入默认值" />
        </el-form-item>

        <!-- 选项配置（针对选择类组件） -->
        <template v-if="['select', 'radio', 'checkbox'].includes(store.selectedField.type)">
          <el-divider>选项配置</el-divider>
          
          <el-form-item label="选项列表">
            <div class="w-full">
              <div
                v-for="(option, index) in store.selectedField.options"
                :key="index"
                class="flex items-center gap-2 mb-2"
              >
                <el-input
                  v-model="option.label"
                  placeholder="选项标签"
                  size="small"
                />
                <el-input
                  v-model="option.value"
                  placeholder="选项值"
                  size="small"
                />
                <el-button
                  size="small"
                  type="danger"
                  @click="removeOption(index)"
                >
                  删除
                </el-button>
              </div>
              
              <el-button
                type="primary"
                size="small"
                @click="addOption"
              >
                添加选项
              </el-button>
            </div>
          </el-form-item>
        </template>

        <!-- 验证规则 -->
        <el-divider>验证规则</el-divider>
        
        <el-form-item label="验证规则">
          <div class="w-full">
            <div
              v-for="(rule, index) in store.selectedField.rules || []"
              :key="index"
              class="flex items-center gap-2 mb-2"
            >
              <el-select v-model="rule.validator" placeholder="选择验证器" size="small">
                <el-option value="required" label="必填" />
                <el-option value="email" label="邮箱" />
                <el-option value="phone" label="手机号" />
              </el-select>
              <el-input v-model="rule.message" placeholder="错误提示" size="small" />
              <el-button size="small" type="danger" @click="removeRule(index)">
                删除
              </el-button>
            </div>
            
            <el-button type="primary" size="small" @click="addRule">
              添加规则
            </el-button>
          </div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-divider />
        <el-form-item>
          <el-button type="danger" size="small" @click="handleRemoveField">
            删除字段
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDesignerStore } from '@/store'
import type { FormField } from '@/types'

const { store, removeField: removeFormField, updateField } = useDesignerStore()

const addOption = () => {
  if (!store.selectedField) return
  
  if (!store.selectedField.options) {
    store.selectedField.options = []
  }
  
  store.selectedField.options.push({
    label: `选项${store.selectedField.options.length + 1}`,
    value: `value${store.selectedField.options.length + 1}`
  })
}

const removeOption = (index: number) => {
  if (store.selectedField?.options) {
    store.selectedField.options.splice(index, 1)
  }
}

const addRule = () => {
  if (!store.selectedField) return
  
  if (!store.selectedField.rules) {
    store.selectedField.rules = []
  }
  
  store.selectedField.rules.push({
    validator: 'required',
    message: '该字段为必填项'
  })
}

const removeRule = (index: number) => {
  if (store.selectedField?.rules) {
    store.selectedField.rules.splice(index, 1)
  }
}

const handleRemoveField = () => {
  if (store.selectedField) {
    removeFormField(store.selectedField.id)
  }
}
</script>